<script lang="ts" setup>
import { useTheme } from 'vuetify'

import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
import BannerDark from '@images/banner/design-banner-dark.png'
import BannerLight from '@images/banner/design-banner-light.png'
import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'

// Components
import Footer from '@/layouts/components/Footer.vue'
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
import UserProfile from '@/layouts/components/UserProfile.vue'

// Banner

import { useUserStore } from '@/store';
import { getMailNumByAcceptNo } from '@/api/messages'
import { Message } from '@arco-design/web-vue'

const userInfo = useUserStore();

const vuetifyTheme = useTheme()

const upgradeBanner = computed(() => {
  return vuetifyTheme.global.name.value === 'light' ? BannerLight : BannerDark
})
const mailNum = ref();
onMounted(async () => {
  try {
    // 获取所有邮件
    const res = await getMailNumByAcceptNo(userInfo.userId);
    mailNum.value = res.data.data;
  } catch (err) {
    Message.error('获取数据失败')
  }
})
</script>

<template>
  <VerticalNavLayout>
    <!-- 👉 navbar -->
    <template #navbar="{ toggleVerticalOverlayNavActive }">
      <div class="d-flex h-100 align-center">
        <!-- 👉 叠加模式下的垂直导航切换 -->
        <IconBtn
          class="ms-n3 d-lg-none"
          @click="toggleVerticalOverlayNavActive(true)"
        >
          <VIcon icon="bx-menu" />
        </IconBtn>

        <!-- 👉 搜索 -->
        <div
          class="d-flex align-center cursor-pointer"
          style="user-select: none;"
        >
          <!-- 👉 搜索 按钮 -->
          <IconBtn>
            <VIcon icon="bx-search" />
          </IconBtn>

          <span class="d-none d-md-flex align-center text-disabled">
            <span class="me-3">搜索</span>
            <span class="meta-key">&#8984;K</span>
          </span>
        </div>

        <VSpacer />

        <IconBtn
          class="me-2"
          target="_blank"
          rel="noopener noreferrer"
        >
          <VIcon icon="bxl-github" />
        </IconBtn>

        <IconBtn class="me-2">
          <VIcon icon="bx-bell" />
        </IconBtn>

        <NavbarThemeSwitcher class="me-2" />

        <UserProfile />
      </div>
    </template>

    <template #vertical-nav-content>
      <VerticalNavLink
        :item="{
          title: '工作台',
          icon: 'bx-home',
          to: '/dashboard',
        }"
         v-if="userInfo.userRole === '建模主管' || userInfo.userRole === '渲染主管'|| userInfo.userRole === '后期主管'
        || userInfo.userRole === '建模新手'|| userInfo.userRole === '建模熟手'|| userInfo.userRole === '渲染新手'
        || userInfo.userRole === '渲染熟手'|| userInfo.userRole === '后期新手'|| userInfo.userRole === '后期熟手'
        || userInfo.userRole === '老板'"
      />

      <!-- 👉 管理页面 -->
      <VerticalNavSectionTitle
        :item="{
          heading: '管理页面',
        }"
        v-if="userInfo.userRole === '前台'|| userInfo.userRole === '老板'|| userInfo.userRole === '建模主管'|| userInfo.userRole === '渲染主管'|| userInfo.userRole === '后期主管'"
      />
      <VerticalNavLink
        :item="{
          title: '客户管理',
          icon: 'bx-body',
          to: '/customer-managements',
          
        }"
        v-if="userInfo.userRole === '前台'|| userInfo.userRole === '老板'"
      />
      <VerticalNavLink
        :item="{
          title: '员工管理',
          icon: 'bx-universal-access',
          to: '/staff-managements',
        }"
        v-if="userInfo.userRole === '前台'|| userInfo.userRole === '老板'"
      />
      <VerticalNavLink
        :item="{
          title: '项目管理',
          icon: 'bx-archive',
          to: '/project-managements',
        }"
        v-if="userInfo.userRole === '建模主管' || userInfo.userRole === '渲染主管'|| userInfo.userRole === '后期主管'
        || userInfo.userRole === '建模新手'|| userInfo.userRole === '建模熟手'|| userInfo.userRole === '渲染新手'
        || userInfo.userRole === '渲染熟手'|| userInfo.userRole === '后期新手'|| userInfo.userRole === '后期熟手'
        || userInfo.userRole === '老板'"
      />

      <!-- 👉 User Interface -->
      <!-- <VerticalNavSectionTitle
        :item="{
          heading: '示例页面',
        }"
      />
      <VerticalNavLink
        :item="{
          title: '字体排版',
          icon: 'mdi-alpha-t-box-outline',
          to: '/typography',
        }"
      />
      <VerticalNavLink
        :item="{
          title: '示例图标',
          icon: 'bx-show',
          to: '/icons',
        }"
      />
      <VerticalNavLink
        :item="{
          title: '示例卡片',
          icon: 'bx-credit-card',
          to: '/cards',
        }"
      />
      <VerticalNavLink
        :item="{
          title: '示例表格',
          icon: 'bx-table',
          to: '/tables',
        }"
      />
      <VerticalNavLink
        :item="{
          title: '表格布局',
          icon: 'mdi-form-select',
          to: '/form-layouts',
        }"
      /> -->
      <!-- 👉 用户页面 -->
      <VerticalNavSectionTitle
        :item="{
          heading: '用户页面',
        }"
        v-if="userInfo.userRole === '客户'"
      />
      <VerticalNavLink
        :item="{
          title: '关于本站',
          icon: 'mdi-alpha-t-box-outline',
          to: '/about',
        }"
        v-if="userInfo.userRole === '客户'"
      />
      <VerticalNavLink
        :item="{
          title: '我的项目',
          icon: 'bx-street-view',
          to: '/my-projects',
        }"
        v-if="userInfo.userRole === '客户'"
      />
      <VerticalNavLink
        :item="{
          title: '我的信箱',
          icon: 'bx-message',
          to: '/my-messages',
          content:mailNum,
        }"
      />
    
     
    </template>

    <template #after-vertical-nav-items>
      <!-- 👉 插图 -->
      <div
        target="_blank"
        rel="noopener noreferrer"
        style="margin-left: 7px;"
      >
        <img
          :src="upgradeBanner"
          alt="upgrade-banner"
          transition="scale-transition"
          class="upgrade-banner mx-auto"
          style="max-width: 230px;"
        >
    </div>
    </template>

    <!-- 👉 Pages -->
    <slot />

    <!-- 👉 Footer -->
    <template #footer>
      <Footer />
    </template>
  </VerticalNavLayout>
</template>

<style lang="scss" scoped>
.meta-key {
  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 6px;
  block-size: 1.5625rem;
  line-height: 1.3125rem;
  padding-block: 0.125rem;
  padding-inline: 0.25rem;
}
</style>
